<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>시장통계</title>
<script src="https://www.google.com/jsapi"></script>
<script src="/Jangdolbaeng2/js/jquery-1.11.1.js"></script>
<script src="/Jangdolbaeng2/js/bootstrap.min.js"></script>
<link href="/Jangdolbaeng2/css/bootstrap.min.css" rel="stylesheet">
<link href="/Jangdolbaeng2/css/customer/common.css" rel="stylesheet">
<style type="text/css">
#categoryNameListOutput
{
	/* position:absolute;  */
	top:400px;
	left:200px;
}

#categoryDayOutput
{
	/* position:absolute;  */ 
	top:400px;
	left:200px;
}

#categoryWeekOutput
{
	/* position:absolute;  */
	top:400px;
	left:200px;
}

#rightDiv
{
	/* position:absolute;  */ 
	top:400px;
	left:800px;
}

</style>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});

$(document).ready(function(){
	
	init();
});	

function init()
{
	$.ajax({
		url: 'categoryNameList.action',
		type: 'POST',
		dateType: 'json',
		success: categoryNameListOutput
	});
}

function categoryNameListOutput(json)
{
	$('#listDiv').html('');
	$('#my_chart').html('');
	
	var arr1 = new Array();
	var arr2 = new Array();
	
	$.each(json.ctotalVolumeList, function(key, item){
		//arr1[key] = item.MONTH;
		arr1[key] = item.CATEGORY;
		arr2[key] = item.VOLUME;
	});
	
	var data = new google.visualization.DataTable();
	
	data.addColumn('string', '카테고리');	
	data.addColumn('number', '매출액');

	
	for(i = 0; i < arr1.length; i++){
		
		if(arr1[i] == 'f')
			data.addRow(['과일류', arr2[i]]);
		if(arr1[i] == 'v')
			data.addRow(['채소류', arr2[i]]);
		if(arr1[i] == 'i')
			data.addRow(['생선류', arr2[i]]);
		if(arr1[i] == 'm')
			data.addRow(['육류', arr2[i]]);
		if(arr1[i] == 'g')
			data.addRow(['식료품류', arr2[i]]);
		if(arr1[i] == 'h')
			data.addRow(['건강용품', arr2[i]]);
		if(arr1[i] == 'a')
			data.addRow(['패션', arr2[i]]);
		if(arr1[i] == 'l')
			data.addRow(['생활용품', arr2[i]]);
		if(arr1[i] == 'e')
			data.addRow(['기타', arr2[i]]);
	}

	var options = {
		    title: '카테고리별 총매출액 비교',
		};
	
    var chart = new google.visualization.AreaChart(document.getElementById('my_chart'));
    chart.draw(data, options);
	
	var f = 1;
	var v = 2;
	var i = 3;
	var m = 4;
	var g = 5;
	var h = 6;
	var a = 7;
	var l = 8;
	var e = 9;
	
	var str = '&nbsp';	
	str += '<div id="categoryNameListOutput">';
	str += '<center>';	
	str += '<table>'
	str += '<tr>';
	str += '<td>'; 
	str += '<span style="font-family: anew; font-weight: bold;"><a href="marketStatistics.action">' + '가게별' + '</span></a>';
	str += '&nbsp;&nbsp;'; 
	str += '<span style="font-family: anew; font-weight: bold;"><a href="categoryStatistics.action">' + '카테고리별' + '</span></a>';
	str += '</td>';
	str += '</tr>';
	str += '</table>';
	str += '<br>';
	str += '<table class="table table table-striped table-hover table-bordered" style="text-align: center; width: 400px;">';	
	str += '<td  class="success" style="font-weight: bold" colspan="2">' + '카테고리별' + '</td>';
	$.each(json.categoryNameList , function(key, item){
	str += '<tr>'; 
	if(item.category_key == 'f')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + f + ')">' + 1 + '</a>' + '</td>';
	else if(item.category_key == 'v')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + v + ')">' + 2 + '</a>' + '</td>';
	else if(item.category_key == 'i')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + i + ')">' + 3 + '</a>' + '</td>';
	else if(item.category_key == 'm')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + m + ')">' + 4 + '</a>' + '</td>';
	else if(item.category_key == 'g')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + g + ')">' + 5 + '</a>' + '</td>';
	else if(item.category_key == 'h')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + h + ')">' + 6 + '</a>' + '</td>';
	else if(item.category_key == 'a')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + a + ')">' + 7 + '</a>' + '</td>';
	else if(item.category_key == 'l')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + l + ')">' + 8 + '</a>' + '</td>';
	else if(item.category_key == 'e')
		str += '<td width="50">' + '<a style="color: blue;" href="' + 'javascript:weekfunc(' + e + ')">' + 9 + '</a>' + '</td>';
	str += '<td>' + item.category_value + '</td>';
	str += '</tr>';
	});
	str += '</table>'; 
	str += '</center>';
	str += '</div>';
	$('#listDiv').html(str);
}

function dayfunc(categorytxt)
{
	if(categorytxt == 1)
		categorytxt = 'f';
	else if(categorytxt == 2)	
		categorytxt = 'v';
	else if(categorytxt == 3)	
		categorytxt = 'i';
	else if(categorytxt == 4)	
		categorytxt = 'm';
	else if(categorytxt == 5)	
		categorytxt = 'g';
	else if(categorytxt == 6)	
		categorytxt = 'h';
	else if(categorytxt == 7)	
		categorytxt = 'a';
	else if(categorytxt == 8)	
		categorytxt = 'l';
	else if(categorytxt == 9)	
		categorytxt = 'e';
	
	$.ajax({
		url: 'categoryDaySales.action',
		type: 'POST',
		dateType: 'json',
		data: 
		{
			categorytxt: categorytxt
		},
		success: categoryDayOutput
	});

}

function categoryDayOutput(json)
{
	if(json.categoryDayList == '')
	{
		alert('오늘 판매된 상품이 없습니다.');
		return false;
	}

	$('#listDiv').html('');
	$('#my_chart').html('');
	
	var arr1 = new Array();
	var arr2 = new Array();
	
	$.each(json.categoryDayList, function(key, item){
		arr1[key] = item.PRODUCT_NAME;
		arr2[key] = item.VOLUME;
	});
	
	var data = new google.visualization.DataTable();
	
	data.addColumn('string', '상품이름');	
	data.addColumn('number', '매출액');

	for(i = 0; i < arr1.length; i++){
		data.addRow([arr1[i], arr2[i]]);
	}
		
	var options = {
	    title: '상품 매출액 비교',
	};
	
    var chart = new google.visualization.PieChart(document.getElementById('my_chart'));
    chart.draw(data, options);
	
	var categorytext;
	var categorytxt;
	var str = '&nbsp';
	str += '<div id="categoryDayOutput">';
	str += '<center>';
	str += '<table class="table table table-striped table-hover table-bordered" style="text-align: center; width: 500px;">';
	str += '<td class="success" style="font-weight: bold">' + '상품이름' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '가격' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '개수' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '매출액' + '</td>';
	$.each(json.categoryDayList, function(key, item){
	categorytext = item.CATEGORY_KEY;
	str += '<tr>';
	str += '<td>' + item.PRODUCT_NAME + '</td>';
	str += '<td>' + item.PRODUCT_PRICE + '</td>';
	str += '<td>' + item.QUANTITY + '</td>';
	str += '<td>' + item.VOLUME + '</td>';
	str += '</tr>';
	});
	
	str += '<tr>';
	$.each(json.c_totalDayList, function(key, item){
		str += '<td class="success" style="font-weight: bold" colspan="4">' + '총매출: ' + item.TOTAL + '</td>';
		});
	str += '</tr>';
	
	if(categorytext == 'f')
		categorytxt = 1;
	else if(categorytext == 'v')
		categorytxt = 2;
	else if(categorytext == 'i')
		categorytxt = 3;
	else if(categorytext == 'm')
		categorytxt = 4;
	else if(categorytext == 'g')
		categorytxt = 5;
	else if(categorytext == 'h')
		categorytxt = 6;
	else if(categorytext == 'a')
		categorytxt = 7;
	else if(categorytext == 'l')
		categorytxt = 8;
	else if(categorytext == 'e')
		categorytxt = 9;
	
	str += '</table>';
	str += '<button type="button" class="btn btn-default" style="width: 100px; background-color: #62943D;"><span >' + '<a style="color: white;" href="javascript:dayfunc(' + categorytxt + ')">' + '당일' + '</a>' + '</span></button>';				
	str += '<button type="button" class="btn btn-default" style="width: 100px; background-color: #62943D;"><span >' + '<a style="color: white;" href="javascript:weekfunc(' + categorytxt + ')">' + '일주일' + '</a>' + '</span></button>';				
	str += '</center>';	
	str += '</div>';
	$('#listDiv').html(str);

}


function weekfunc(categorytxt)
{
	if(categorytxt == 1)
		categorytxt = 'f';
	else if(categorytxt == 2)	
		categorytxt = 'v';
	else if(categorytxt == 3)	
		categorytxt = 'i';
	else if(categorytxt == 4)	
		categorytxt = 'm';
	else if(categorytxt == 5)	
		categorytxt = 'g';
	else if(categorytxt == 6)	
		categorytxt = 'h';
	else if(categorytxt == 7)	
		categorytxt = 'a';
	else if(categorytxt == 8)	
		categorytxt = 'l';
	else if(categorytxt == 9)	
		categorytxt = 'e';

	$.ajax({
		url: 'categoryWeekSales.action',
		type: 'POST',
		dateType: 'json',
		data: 
		{
			categorytxt: categorytxt
		},
		success: categoryWeekOutput
	});
}

function categoryWeekOutput(json)
{
	if(json.categoryWeekList == '')
	{
		alert('일주일간 판매기록이 없습니다.');
		return false;
	}
	
	$('#listDiv').html('');
	$('#my_chart').html('');
	
	var arr1 = new Array();
	var arr2 = new Array();
	
	$.each(json.categoryWeekList, function(key, item){
		arr1[key] = item.PRODUCT_NAME;
		arr2[key] = item.VOLUME;
	});
	
	var data = new google.visualization.DataTable();
	
	data.addColumn('string', '상품이름');	
	data.addColumn('number', '매출액');

	for(i = 0; i < arr1.length; i++){
		data.addRow([arr1[i], arr2[i]]);
	}
		
	var options = {
	    title: '상품 매출액 비교',
	};
	
    var chart = new google.visualization.PieChart(document.getElementById('my_chart'));
    chart.draw(data, options);
	
	var categorytext;
	var categorytxt;
	var str = '&nbsp';
	str += '<div id="categoryWeekOutput">';
	str += '<center>';
	str += '<table class="table table table-striped table-hover table-bordered" style="text-align: center; width: 500px;">';
	str += '<td class="success" style="font-weight: bold">' + '상품이름' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '가격' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '개수' + '</td>';
	str += '<td class="success" style="font-weight: bold">' + '매출액' + '</td>';
	$.each(json.categoryWeekList, function(key, item){
	categorytext = item.CATEGORY_KEY;
	str += '<tr>';
	str += '<td>' + item.PRODUCT_NAME + '</td>';
	str += '<td>' + item.PRODUCT_PRICE + '</td>';
	str += '<td>' + item.QUANTITY + '</td>';
	str += '<td>' + item.VOLUME + '</td>';
	str += '</tr>';
	});
	
	str += '<tr>';
	$.each(json.c_totalWeekList, function(key, item){
		str += '<td class="success" style="font-weight: bold" colspan="4">' + '총매출: ' + item.TOTAL + '</td>';
		});
	str += '</tr>';
	
	
	if(categorytext == 'f')
		categorytxt = 1;
	else if(categorytext == 'v')
		categorytxt = 2;
	else if(categorytext == 'i')
		categorytxt = 3;
	else if(categorytext == 'm')
		categorytxt = 4;
	else if(categorytext == 'g')
		categorytxt = 5;
	else if(categorytext == 'h')
		categorytxt = 6;
	else if(categorytext == 'a')
		categorytxt = 7;
	else if(categorytext == 'l')
		categorytxt = 8;
	else if(categorytext == 'e')
		categorytxt = 9;
	
	str += '</table>';
	str += '<button type="button" class="btn btn-default" style="width: 100px; background-color: #62943D;"><span >' + '<a style="color: white;" href="javascript:dayfunc(' + categorytxt + ')">' + '당일' + '</a>' + '</span></button>';				
	str += '<button type="button" class="btn btn-default" style="width: 100px; background-color: #62943D;"><span >' + '<a style="color: white;" href="javascript:weekfunc(' + categorytxt + ')">' + '일주일' + '</a>' + '</span></button>';				
	str += '</center>';	
	str += '</div>';
	
	$('#listDiv').html(str);
	
}

</script>
</head>
<body>
<div id="header">
	<%@ include file="adminHeader.jsp" %>
</div>

<div class="container" align="center">
	<h3 align="center" style="margin-top: 50px; margin-bottom: 20px;"><span class="glyphicon glyphicon-stats"></span> <span style="font-family: anew">시장통계</span></h3>

	<div id="wrapper" style="margin:0 auto;">
		
		<div id="listDiv" style="margin:0 auto;"></div>	
		
		<div id="rightDiv">
			<div id="my_chart" style="width: 800px; margin:0 auto; height: 500px;"></div>
		</div>
		<!-- 
		<div id="leftDiv">
			<div id="my_chart2" style="width: 800px; margin:0 auto; height: 500px;"></div>
		</div>
		 -->
	</div>	
</div>
	
</body>
</html>